@import "_function";
.listen_details{
  header{
    background: url("../../src/image/listenbook-bg.jpg") no-repeat;
    .bgs(750,400);
    .top {
      .h(88);
      .oh;
      i{
        .db();
        .fl();
        .w(23);
        .h(42);
        .ml(56);
        .mt(23);
        background: url("../../src/image/listenbook-back1.png") no-repeat;
        .bgs(23,42);
      }
      span{
        .db();
        .fr();
      }
      .share{
        .w(38);
        .h(38);
        background: url("../../src/image/listenbook-share.png") no-repeat;
        .bgs(38,38);
        .mr(59);
      }
      .like{
        .w(40);
        .h(36);
        background: url("../../src/image/listenbook-like.png") no-repeat;
        .bgs(40,36);
        .mr(40);
      }
    }
    .title{
      .oh();
      .c(#ffffff);
      .ml(70);
      .pb(50);
      img{
          .w(200);
          .h(280);
          .db();
          .fl();
          .mr(41);
        }
      h3{
        .fs(32);
        .mb(76);
        .mt(12);
      }
      p{
        .mb(20);
        .fs(24);
        i{
          .c(#5ebbff);
        }
      }
    }
  }
  .synopsis{
    .w(702);
    margin: 0 auto;
    border-bottom: 4px solid #e9e9e9;
    .pb(30);
    .pt(40);
    .syn{
      .oh();
      .c(#959595);
      h2{
        .fs(32);
        .fl();
        .ml(32);
      }
      span{
        .db();
        .fr();
        .fs(28);
        .mr(35);
      }
    }
    p{
      .mt(31);
      .fs(24);
      .lh(44);
      .c(#959595);
      .ml(32);
      .mr(35);
    }
  }
  .catalog{
    .w(702);
    .c(#959595);
    margin:0 auto;
    .pt(40);
    .oh();
    h2{
      .fs(32);
      .fl();
      .ml(32);
      .mr(50);
      .c(#666666);
    }
    .chapter{
      .w(500);
      .fs(28);
      .fl();
      .mt(3);
      .oh();
      i{
        .ml(20);
        .fl();
        .db();
      }
      span{
        .fr();
        .db();
        .w(19);
        .h(34);
        background:url("../../src/image/rankingIcon4.png") no-repeat;
        .bgs(19,34);
      }
    }
  }
  .col{
    .h(20);
    background: #e9e9e9;
    .mt(40);
    .mb(40);
  }
  .hot{
    .w(702);
    margin: 0 auto;
    .hot-title{
      .oh();
      .fs(32);
      .c(#666666);
      h2{
        .ml(30);
        .fl();
        .mb(40);
      }
      span{
        .db();
        .fr();
        .mr(35);
      }
      span:after{
        content: "";
        .db();
        .fr();
        .w(18);
        .h(18);
        .ml(6);
        .mt(7);
        background: url("../../src/image/listenbook-back.png") no-repeat;
        .bgs(18,18);
      }
    }
    ul{
      .oh();
      li{
        .fl();
        .ml(11);
        .mr(29);
        .tc();
        .c(#7a7a7a);
        .fs(24);
        list-style: none;
        img{
          .w(140);
          .h(180);
          .mb(20);
        }
      }
      li:last-child{
        .mr(0);
      }
    }
  }
  .comment{
    .w(702);
    margin: 0 auto;
    .com-title{
      .oh();
      .fs(32);
      .c(#666666);
      h2{
        .ml(30);
        .fl();
        .mb(40);
      }
      span{
        .db();
        .fr();
        .mr(35);
        .c(#67bfff);
      }
      span:before{
        content: "";
        .db();
        .fl();
        .w(24);
        .h(22);
        .mr(6);
        .mt(7);
        background: url("../../src/image/listenbook-write.png") no-repeat;
        .bgs(24,22);
      }
    }
    .user{
      .pb(25);
      .mb(22);
      border-bottom: 3px solid #e9e9e9;
      .oh;
      a{
        .h(200);
        .db;
        .fl();
        .mr(30);
        .ml(21);
        img{
          .w(72);
          .h(72);
        }
      }
      .c(#666666);
      h3{
        .fs(28);
      }
      .star{
        .oh;
        .mt(20);
        .mb(25);
        i{
          .db;
          .fl;
          .mr(8);
          .w(24);
          .h(24);
          background: url("../../src/image/listenbook-star.png") no-repeat;
          .bgs(24,24);
        }
        b{
          .db;
          .fl;
          .ml(13);
          .fs(20);
        }
      }
      p{
        .fs(24);
        .lh(40);
      }
      .l-r{
        .oh;
        .fr;
        .fs(24);
        .mr(35);
        i{
          .db;
          .fl;
        }
        i:after{
          content: "";
          .db;
          .w(28);
          .h(28);
          background: url("../../src/image/listenbook-laud.png") no-repeat;
          .bgs(28,28);
          .fl;
          .mr(9);
        }
        i:before{
          content: "";
          .db;
          .w(26);
          .h(24);
          .ml(27);
          .mr(10);
          background: url("../../src/image/listenbook-reply.png") no-repeat;
          .bgs(26,24);
          .fr;
          .mt(4);
        }
      }
    }
    button{
      margin-left: 35%;
      .w(196);
      .h(52);
      .lh(34);
      .tc;
      .fs(32);
      .c(#666666);
      background: none;
      .br(5);
      border: 2px solid #666666;
      .mb(58);
      .mt(20);
    }
  }
  footer{
    .h(96);
    .lh(96);
    .tc;
    .fs(32);
    .oh;
    a{
      .fl;
      width: 33%;
      .c(#666666);
    }
    .on{
      background:#5ebbff;
      .c(#ffffff);
    }
  }
}